<!-- 完善信息 -->
<template>
  <div>
    <head-nav></head-nav>
    <!-- 占位 -->
    <div class="zanwei-top"></div>
    <div class="hyts">
      <p class="hynh" :style="textColor">亲爱的会员您好</p>
      <p class="tswz">为了更好的更新您的积分和相关权益，请核对以下信息</p>
    </div>
    <div class="perfectinput">
      <ul>
        <!-- <li>
          <mt-field v-model="userlist.name" label="您的姓名" placeholder="请输入您的姓名" type="text">
          </mt-field>
        </li> -->
        <li>
          <mt-field v-model="userlist.phone" label="手机号" placeholder="请输入您的手机号" type="number" disabled></mt-field>
        </li>
        <li class="mint-cell-wrapper ndxb">
          <div class="title">您的性别</div>
          <div class="mint-cell-value value">
            <mt-radio v-model="userlist.sex" :options="['男', '女']">
            </mt-radio>
          </div>
        </li>
        <li>
          <mt-field v-model="userlist.xfvipcode" label="会员卡号" placeholder="请输入您的会员卡号" type="tel" disabled></mt-field>
        </li>
        <!-- <li>
          <mt-field v-model="userlist.idCard" label="身份证号" placeholder="请输入您的身份证号码" type="text">
          </mt-field>
        </li>
        <li>
          <mt-field v-model="userlist.address" label="所在市/区" placeholder="请输入您的所在市/区" type="text">
          </mt-field>
        </li> -->

      </ul>
      <div class="line20"></div>
      <ul>
        <!-- <li class="yhxy">
          注册成功即视为同意
          <router-link :to="'agreement'"> 用户注册协议</router-link>
        </li> -->
        <li class="zcbtn">
          <mt-button type="primary" size="large" @click.native="bindfn">立即绑定</mt-button>
        </li>
      </ul>
    </div>
    <!-- 弹出注册成功 -->
    <div class="zccg" v-show="cgts">
        	<!-- 背景 -->
            <div class="zccgbg"></div>
            <div class="zccgbox">
                <img class="ph" :src="bdcgimg">
                <!--<div class="zero" @click="gofn('/willsave/2c912ccd641c5c0501641c70ad4f0025')"></div>-->
                <div v-show="!ewmpage" class="btnbox">
                	<div v-show="btn1name != ''" class="one tobtn" @click="gofn(btn1url)">{{btn1name}}</div>
	                <div v-show="btn2name != ''" class="two tobtn" @click="gofn(btn2url)">{{btn2name}}</div> 
	                <div v-show="btn3name != ''" class="three tobtn" @click="gofn(btn3url)">{{btn3name}}</div>
                </div>
                <div v-show="ewmpage" class="ewmBtn" @click="lookEwm"></div>
            </div>
        </div>
        
        <div class= "zcewm" v-show="ewmshow" @click="nolook">
        	<img @click.stop="stopTap" :src="relewmimg"/>
        </div>
  </div>
</template>

<script>
import api from "../../api/api.js";
import { MessageBox, Toast } from "mint-ui";
// import Linkage from "./common/Address.vue";
export default {
  data() {
    return {
      cgts: false,
      userlist: {
        name: "",
        sex: "",
        phone: "",
        vipcode: "",
        xfvipcode: "",
        idCard: "",
        address: ""
      },
      options: [
        {
          label: "男",
          value: "男",
          disabled: true
        },
        {
          label: "女",
          value: "女",
          disabled: true
        }
      ],
      ewmshow: false,
      btn1name: '',
	    btn1url: '',
	    btn2name: '',
	    btn2url: '',
	    btn3name: '',
	    btn3url: '',
	    relewmimg: '',
	    ewmpage: false,
	    zccgimg: "",
	    bdcgimg: ''
    };
  },
  methods: {
  	stopTap() {
			console.log('stop');
		},
		// 关闭二维码
		nolook() {
			this.ewmshow = false;
		},
		// 打开二维码
		lookEwm() {
			console.log(1);
			this.ewmshow = true;
		},
    gofn (url) {
      if (url.indexOf('http') === -1) {
    		this.$router.push(url);
    	} else {
    		location.href = url;
    	}
    },
    // 绑定
    bindfn() {
      let that = this;
      //地址栏获取员工参数
      let query = this.$route.query;
      if (query.ygname == undefined) {
        query.ygname = "";
      } else if (query.ygcode == undefined) {
        query.ygcode = "";
      }
      //地址栏获取员工参数end
      
      
      let sex;
      if (this.userlist.sex == "男") {
        sex = "M";
      } else {
        sex = "F";
      }
      var fromdata = {
        name: this.userlist.name || '',
        sex: sex,
        phone: this.userlist.phone,
        xfvipcode: query.vipcode,
        idCard: this.userlist.idCard || '',
        address: this.userlist.address || '',
        ygname: query.ygname || '', //员工name
        ygcode: query.ygcode || ''//员工编号
      };

      api.binding(this, fromdata, function(res) {
        let data = res.data;
        console.log(res);
        if (data.code == 0) {
          let userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
          userinfo.vipcode = query.vipcode;
      sessionStorage.setItem("userinfo", JSON.stringify(userinfo));
          // 判断是否关注过
					            api.getUserSubscribe(that, userinfo.openid, function (isres) {
					            	console.log('是否关注过')
					            	console.log(isres);
					            	let isdata = isres.data;
					            	if (isdata.code === 0) {
					            		if (isdata.data === "1") {// 关注过
					            			// 通过type值判断是否是别的地方跳转过来的
	                                        if (that.$route.query.type === undefined) {
	                                        	that.cgts = true;
						            			that.ewmpage = false;
						            			api.getSysConfig(that, function (sysres) {
									            	console.log('系统设置')
									            	console.log(sysres);
									            	let sysdata = sysres.data.data;
									            	that.btn1name = sysdata.BUT1;
									            	that.btn1url = sysdata.BUT1URL;
									            	that.btn2name = sysdata.BUT2;
									            	that.btn2url = sysdata.BUT2URL;
									            	that.btn3name = sysdata.BUT3;
									            	that.btn3url = sysdata.BUT3URL;
									            	// 注册成功(出现按钮)
									            	that.zccgimg = that.host.filehost + sysdata.CGYM[0].ID;
									            	// 绑定成功(出现按钮)
									            	that.bdcgimg = that.host.filehost + sysdata.BDCGYM[0].ID;
									            });
	                                        } else {
	                                        	if (that.$route.query.type === "game") {
	                                        		MessageBox({
		                                        		title: '提示',
		                                        		message: '恭喜您绑定成功!',
		                                        		showCancelButton: false,
		                                        		confirmButtonText: "返回",
		                                        		confirmButtonClass: "zcbtn"
		                                        	}).then(action => {
		                                        		location.href = that.isGameUrl;
		                                        	});
	                                        	} else {
	                                        		MessageBox({
		                                        		title: '提示',
		                                        		message: '恭喜您绑定成功!',
		                                        		showCancelButton: false,
		                                        		confirmButtonText: "返回",
		                                        		confirmButtonClass: "zcbtn"
		                                        	}).then(action => {
		                                        		that.$router.go(-1);
		                                        	});
	                                        	}
	                                        }
					            			
					            		} else {// 未关注过
					            			// 通过type值判断是否是别的地方跳转过来的
	                                        if (that.$route.query.type === undefined) {
	                                        	that.cgts = true;
						            			that.ewmpage = true;
						            			api.getSysConfig(that, function (sysres) {
									            	console.log('系统设置')
									            	console.log(sysres);
									            	let sysdata = sysres.data.data;
									            	// 二维码图片
									            	that.relewmimg = that.host.filehost + sysdata.GZHRWM[0].ID;
									            	// 注册成功(出现二维码)
									            	that.zccgimg = that.host.filehost + sysdata.ZCGZTP[0].ID;
									            	// 绑定成功(出现二维码)
									            	that.bdcgimg = that.host.filehost + sysdata.BDCGGZ[0].ID;
									            });
		                                        
	                                        } else {
	                                        	if (that.$route.query.type === "game") {
	                                        		MessageBox({
		                                        		title: '提示',
		                                        		message: '恭喜您绑定成功!',
		                                        		showCancelButton: false,
		                                        		confirmButtonText: "返回",
		                                        		confirmButtonClass: "zcbtn"
		                                        	}).then(action => {
		                                        		location.href = that.isGameUrl;
		                                        	});
	                                        	} else {
	                                        		MessageBox({
		                                        		title: '提示',
		                                        		message: '恭喜您绑定成功!',
		                                        		showCancelButton: false,
		                                        		confirmButtonText: "返回",
		                                        		confirmButtonClass: "zcbtn"
		                                        	}).then(action => {
		                                        		that.$router.go(-1);
		                                        	});
	                                        	}
	                                        }
					            			
					            		}
					            	} else {
					            		that.Toastfn(isdata.msg, 2000);
					            	}
					            });
        } else {
          that.Toastfn(data.msg, 2000);
        }
      });
    },
    jrqbfn() {
      //跳转到钱包
      this.$router.push({ path: "/wallet" });
    },
    // 提示函数
    Toastfn(message, duration, position) {
      Toast({
        message: message,
        duration: duration,
        position: position
      });
    }
  },
  created() {
    let that = this;
       let userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
        
    
    // console.log(userinfo.vipcode,'vipcode');
    api.getUserInfo(this, function(res) {
      let data = res.data;
      console.log(res);
      if (data.code == 0) {
        // 老数据
        let olduserlist = data.data;
        // 数据转换
        if (olduserlist.XF_SEX == "M") {
          olduserlist.XF_SEX = "男";
        } else {
          olduserlist.XF_SEX = "女";
        }
        // that.userlist = {
        //   name: olduserlist.XF_SURNAME,
        //   xfvipcode: olduserlist.XF_VIPCODE,
        //   phone: olduserlist.XF_TELEPHONE,
        //   sex: olduserlist.XF_SEX,
        //   vipcode: olduserlist.XF_VIPCODE,
        //   idCard: olduserlist.XF_VIPID,
        //   address: olduserlist.XF_ADDRESS1
        // };
        that.userlist = {
          // name: olduserlist.XF_SURNAME,
          xfvipcode: olduserlist.XF_VIPCODE,
          phone: olduserlist.XF_TELEPHONE,
          sex: olduserlist.XF_SEX,
          vipcode: olduserlist.XF_VIPCODE,
          // idCard: olduserlist.XF_VIPID,
          // address: olduserlist.XF_ADDRESS1
        };
      } else if(data.code === 9999){
        //orcal数据库异常 关闭当前窗口
        MessageBox.alert(data.msg, '温馨提示').then(action => {
          wx.closeWindow()
        })
      }else {
        Toast({
          message: data.msg,
          duration: 2000
        });
      }
    });
  }
};
</script>

<style scoped lang="less">
.mint-field-core1 {
  border: 0;
  background-color: #ffffff;
}
ul,
li {
  list-style: none;
}
.perfectinput {
  > ul:first-child {
    padding-bottom: 0.2rem;
  }
  .yhxy {
    padding: 0.25rem;
    display: flex;
    align-items: center;
    font-size: 0.28rem;
    a {
      color: #F05DC4;
    }
  }

  .zcbtn {
    padding: 0.2rem;
  }
}

.hyts {
  text-align: center;
  padding-top: 0.7rem;
  padding-bottom: 0.5rem;
  .hynh {
    font-size: 0.4rem;
    color: #F05DC4;
    font-weight: bold;
    padding-bottom: 0.2rem;
  }
  .tswz {
    font-size: 0.24rem;
  }
}

// 提示
.zccg {
  width: 100%;
  top: 0;
  .zccgbox {
    // padding-top: 0.7rem;
    position: fixed;
    z-index: 10;
    width: 80%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    // height: 7.5rem;
    height: 70%;
    background-color: #ffffff;
    // color: #ffffff;
    text-align: center;
    .btnbox {
            	width: 100%;
            	position: absolute;
            	top: 5rem;
            	z-index: 8;
            }
            .tobtn {
            	width: 80%;
            	height: 0.8rem;
            	background: #ffffff;
            	border-radius: 0.12rem;
            	line-height: 0.8rem;
            	text-align: center;
            	color: #f05dc4;
            	margin: 0.16rem auto;
            	overflow: hidden;
            	text-overflow: ellipsis;
            	white-space: nowrap;
            }
    .ewmBtn {
    	position: absolute;
    	left: 0;
    	top: 4.4rem;
    	width: 100%;
    	height: 1.4rem;
    	z-index: 9;
    }
    img.ph {
    	width: 100%;
    	height: 8.2rem;
    }
    .zero {
      position: absolute;
      left: 0;
      top: 5.1rem;
      width: 7.5rem;
      height: 0.66rem;
    }
    .one {
      
    }
    .two {
      
    }
    .three {
      
    }
    // h1 {
    //   font-size: 0.9rem;
    // }

    // .xz {
    //   p {
    //     font-size: 0.36rem;
    //     color: #fce8c7;
    //   }
    //   p:first-child {
    //     padding-top: 0.5rem;
    //   }
    // }

    // .btn {
    //   background-color: #e20010;
    //   color: #ffffff;
    //   font-size: 0.6rem;
    //   width: 3.5rem;
    //   margin: auto;
    //   border-radius: 0.3rem;
    //   margin-top: 1rem;
    //   padding: 0.2rem 0;
    // }
  }
  .zccgbg {
    background-color: #ffffff;
    position: fixed;
    opacity: 0.7;
    width: 100%;
    height: 100vh;
    top: 0;
    z-index: 9;
  }
}
.zcewm {
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,0.5);
		position: fixed;
		left: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		img {
			width: 6rem;
			height: 7.5rem;
		}
	}
</style>
